<template>
    <!--续租 弹框-->
    <el-dialog title="续租" append-to-body :close-on-click-modal="false" :visible.sync="visible" width="900px">
        <el-card class="seat-card">
            <div slot="header" class="clearfix">
                <span>停车位信息</span>
                <!-- <el-button style="float: right" type="primary" icon="el-icon-search" @click="handleSeat(1)">选择车位</el-button> -->
            </div>
            <el-row>
                <el-col :span="8">
                    <div class="seat-item">车位ID: {{ seatInfo.id }}</div>
                </el-col>
                <el-col :span="8">
                    <div class="seat-item">编号:{{ seatInfo.carCode }}</div>
                </el-col>
                <el-col :span="8">
                    <div class="seat-item">停车场: {{ seatInfo.parkingCode }}</div>
                </el-col>
                <el-col :span="8">
                    <div class="seat-item">
                        车位状态:
                        <dict-tag style="display: inline-block" :options="dict.type.park_space_status" :value="seatInfo.seatStatus" />
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="seat-item">面积: {{ seatInfo.area }} 平方米</div>
                </el-col>
                <el-col :span="8">
                    <div class="seat-item">备注: {{ seatInfo.remarks }}</div>
                </el-col>
            </el-row>
            <el-form style="margin-top: 25px" ref="form" :model="form" :rules="rules" label-width="100px">
                <el-form-item label="车牌号" prop="plateCode">
                    <el-input v-model="form.plateCode" disabled />
                </el-form-item>
                <el-form-item label="起租时间" prop="startTime">
                    <el-date-picker v-model="form.startTime" value-format="yyyy-MM-dd HH:mm" type="datetime" placeholder="选择日期时间"></el-date-picker>
                </el-form-item>
                <el-form-item label="结租时间" prop="endTime">
                    <el-date-picker v-model="form.endTime" value-format="yyyy-MM-dd HH:mm" type="datetime" placeholder="选择日期时间"></el-date-picker>
                </el-form-item>
                <el-form-item label="备注" prop="remarks">
                    <el-input v-model="form.remarks" placeholder="请输入备注" type="textarea" :rows="3" />
                </el-form-item>
            </el-form>
        </el-card>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="visible = false">取 消</el-button>
        </div>
    </el-dialog>
</template>
<script>
import { xzParkdingOwerCar, getParkdingOwerCarDetail } from '@/api/parking/parkingOwnerCar.js';
export default {
    dicts: ['park_space_status'],
    data() {
        return {
            visible: false,
            seatInfo: {},
            id: '',
            form: {
                plateCode: '',
                startTime: '',
                endTime: '',
                remarks: '',
            },
            rules: {
                startTime: [{ required: true, message: '起租时间不能为空', trigger: 'blur' }],
                endTime: [{ required: true, message: '结租时间不能为空', trigger: 'blur' }],
            },
        };
    },
    created() {},
    methods: {
        init() {
            this.form = {
                plateCode: '',
                startTime: '',
                endTime: '',
                remarks: '',
            };
            this.visible = true;
            getParkdingOwerCarDetail(this.id).then(response => {
                let data = response.data;
                this.seatInfo = data;
                this.form.plateCode = data.plateCode;
            });
        },
        /** 提交按钮 */
        submitForm() {
            console.log('提交数据', this.form);
            this.$refs['form'].validate(valid => {
                if (valid) {
                    let params = {
                        id: this.id,
                        seatId: this.seatInfo.seatId,
                        startTime: this.form.startTime,
                        endTime: this.form.endTime,
                        remarks: this.form.remarks,
                    };
                    xzParkdingOwerCar(params).then(response => {
                        this.$message({
                            message: '操作成功',
                            type: 'success',
                            duration: 500,
                            onClose: () => {
                                this.visible = false;
                                this.$emit('refreshDataList');
                            },
                        });
                    });
                }
            });
        },
    },
};
</script>
<style scoped>
.seat-item {
    padding: 10px 0;
}
</style>
